<template>
  <div class="about">
    <img  :src="data.baseUrl+ data.info.url" alt="">
    <div class="info">
      <div class="title">
        <h1>{{data.info.title}}</h1>
        <p>{{data.info.copyright }}</p>
        <div class="btn" style="margin-bottom: 20px;" >
          <van-button  plain hairline type="success"  size="mini" @click="pev">上一张</van-button>
          <van-button  plain hairline type="success"  size="mini" @click="next()">下一张</van-button>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import {reactive,onBeforeMount,onMounted,onUpdated} from 'vue'
import axios from 'axios'
import store from '@/store'
const data = reactive({
  list: [],
  info: {},
  active:0,
  baseUrl:store.state.bingUrl
})
onBeforeMount(()=>{
if (data.list.length===0){
  console.log(111)
  axios.get(`https://raw.onmicrosoft.cn/Bing-Wallpaper-Action/main/data/zh-CN_all.json`).then(res => {
    console.log(res.data.data)
    data.list = res.data.data
    data.info = {...res.data.data[0]}
  //   页面自动滚动到底部

  })

}
})
onUpdated(()=>{
  console.log(222)
  window.scrollTo(0,document.body.scrollHeight)
})
const next = ()=>{
  if (data.active<data.list.length-1){
    data.active++
    data.info = {...data.list[data.active]}
  }
}
const pev = ()=>{
  if (data.active>0){
    data.active--
    data.info = {...data.list[data.active]}
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  transition: all 0.5s;
}
img{
  width: 100%;
  //height: 100%;
}
.title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //h1{
  //  font-size: 30px;
  //}
  //p{
  //  //font-size: 20px;
  //}
}
.about{
  position: relative;
  .info{
    position: absolute;
    bottom: 0;
    width: 100%;
    color: floralwhite;
    opacity: 0;
    transition: opacity 0.5s;
    //background-color: rgba(0,0,0,0.5);
    //自上而下的线性渐变背景颜色
    background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.7),rgba(0,0,0,.8));
  }
  &:hover{
    .info{
      opacity: 1;
    }
  }
}
body::-webkit-scrollbar {
  display: none;
}
</style>
